<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面事件2</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <!--
        onsubmit是表单的提交事件
            可以通过返回值确定次表单是否提交
                false：不提交
                true：提交
    -->
    <form onsubmit="return fun1()" action="demo2.html" method="">
        <button type="submit">提交</button>
    </form>
    <!--
        onclick:单击
        ondblclick:双击
    -->
<!--    <img src="img/001.jpg" onclick="fun2()"/>-->
    <!--onblur：失去焦点事件-->
<!--    <input type="text" onblur="fun3()" id="name"/>-->
    <!--onfocus：获取焦点事件-->
<!--    <input type="text" onfocus="fun4()" id="pwd" value="楠楠"/>-->
    <!--onchange：内容改变事件(用户改变域的内容)-->
    <select id="city" onchange="fun5()">
        <option>合肥</option>
        <option>南京</option>
    </select>
    <select id="ct" onchange="fun5()">
        <option>肥东</option>
        <option>肥西</option>
    </select>
    <!--
        onmouseover：鼠标移上事件
        onmouseout：鼠标移出事件
    -->
    <div onmouseover="fun6()" onmouseout="fun7()"></div>
</body>
<script>
    function fun1() {
        alert("sub...");
        return true;
    }

    function fun2() {
        alert("单击图片");
    }

    function fun3() {
        //弹出文本框的内容
        alert(document.getElementById("name").value);
    }

    function fun4() {
        //弹出文本框的内容
        alert(document.getElementById("pwd").value);
    }

    function fun5() {
        //弹出文本框的内容
        alert(document.getElementById("city").value);
    }

    function fun6() {
        //弹出文本框的内容
        alert("鼠标移上");
    }

    function fun7() {
        //弹出文本框的内容
        alert("鼠标移出");
    }
</script>
</html>